/**
 * 
 * */
function createElementGoodsList() {
  var goodsList = document.querySelector('.goods-list');
  console.log(goods);
  
  var el = goods.map(function (item) {
    return `<li class="goods-item">
    <div class="goods-img">
      <img src="${item.pic}" alt="${item.title}">
    </div>
    <div class="goods-info">
      <h3>${item.title}</h3>
      <p>${item.desc}</p>
      <div class="sell-info">
        <div class="goods-sell-number">月售&nbsp<span>${item.sellNumber}</span></div>
        <div class="goods-favor-rate"><span>好评率&nbsp${item.favorRate}%</span></div>
      </div>
      <div class="goods-price">￥<span>${item.price}</span></div>
      <div class="goods-btn">
        <div class="add-btn">+</div>
      </div>
    </div>
  </li>`
  })
  
  goodsList.innerHTML = el.join('');
} 
createElementGoodsList();

/**
 * 点击左侧菜单 高亮
 * */ 

var menuList = document.querySelector('.menu-list');
console.log(menuList.children[2].textContent);


menuList.onclick = function (evt) {
  var target = evt.target;
  var act = document.querySelector('.active');
  if (act) {
    act.classList.remove('active');
  }
  for (let index = 0; index < menuList.children.length; index++) {
    const element = menuList.children[index];
    if (target.textContent === element.textContent) {
      menuList.children[index].classList.add('active');
    }
    // console.log(target.textContent,element.textContent);
    
  }
  // var goodsList = document.querySelectorAll('.goods-list li');
  // var menuListLength = menuList.length;
  // var goodsListLength = goodsList.length;
  // console.log(menuList);
  // for (var i = 0; i < menuListLength; i++) {
  //   menuList[i].addEventListener('click', function () {
    
  //   })
  // }
}